<template>
	<u-popup v-model="show" mode="bottom" border-radius="28" closeable>
		<view class="city-pop">
			<view class="title">已开通技巧城市</view>
			<view class="citys">
				<view class="city" v-for="(item, index) in citys" :key="index" @click="change_city(item.region_name)">
					{{ item.region_name }}
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			citys: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				show: false,
			}
		},
		methods: {
			change_city(region_name) {
				getApp().globalData.name = region_name;
				uni.switchTab({
					url: '/pages/tabbar/home/index'
				})
			},
			showEdit(tip) {
				this.show = true
			},
			handClose() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.city-pop {
		padding: 24rpx;
		padding-bottom: 34rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 42rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 42rpx);

		.title {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.citys {
			margin-top: 40rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx 0;

			.city {
				width: 20%;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				box-sizing: border-box;
				border-left: 1rpx solid #999999;

				&:first-child {
					border: none;
				}

				&:nth-child(6),
				&:nth-child(11),
				&:nth-child(16),
				&:nth-child(21),
				&:nth-child(26),
				&:nth-child(31),
				&:nth-child(36),
				&:nth-child(41),
				&:nth-child(46),
				&:nth-child(51),
				&:nth-child(56) {
					border: none;
				}
			}
		}
	}
</style>